<template>
	<!-- 我的订单 -->
	<view class="myorder">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="orderList">
			<view class="title">订单信息</view>
			<view class="shalllList">
				<view class="ordernum">消费订单：0</view>
				<view class="money">总消费：￥NaN</view>
			</view>
		</view>
		<view class="InfoList">
			<!-- 导航-->
			<view class="kong">
				<u-tabs
					:list="list4"
					lineWidth="50"
					lineColor="rgb(233,52,55)"
					:activeStyle="{
						fontWeight: 'blod',
						color: '#010102'
					}"
					:inactiveStyle="{
						color: '#424247',
						transform: 'scale(1)'
					}"
					:itemStyle="{
						padding: '10px 6px',
						height: '50px',
						width: '53px',
						textAlign: 'center'
					}"
					current="0"
					@click="handleClick"
				></u-tabs>
				<view class="content">
					<el-payments v-show="ckeckIndex == 0">待付款</el-payments>
					<el-unreceived v-show="ckeckIndex == 1">
						待收货
					</el-unreceived>
					<el-received v-show="ckeckIndex == 2">已收货</el-received>
					<el-evaluated v-show="ckeckIndex == 3">已评价</el-evaluated>
					<el-complated v-show="ckeckIndex == 4">已完成</el-complated>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import payments from "../../components/order/payments.vue";
import unreceived from "../../components/order/unreceived.vue";
import received from "../../components/order/received.vue";
import evaluated from "../../components/order/evaluated.vue";
import complated from "../../components/order/complated.vue";

export default {
	components: {
		"el-payments": payments,
		"el-unreceived": unreceived,
		"el-received": received,
		"el-evaluated": evaluated,
		"el-complated": complated,
		Nav
	},
	data() {
		return {
			title: "Hello",
			list4: [
				{
					name: "待付款",
					badge: {
						value: 0
					}
				},
				{
					name: "	待发货",
					badge: {
						value: 0
					}
				},
				{
					name: "待收货",
					badge: {
						value: 0
					}
				},
				{
					name: "待评价",
					badge: {
						value: 0
					}
				},
				{
					name: "已完成",
					badge: {
						value: 0
					}
				}
			],
			ckeckIndex: 0
		};
	},
	onLoad() {},
	methods: {
		handleClick(item) {
			if (item.index) {
				let res = uni.getStorageSync("_token");
				if (!res.length) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			}
			this.ckeckIndex = item.index;
		}
	}
};
</script>

<style lang="scss">
.orderList {
	background-color: rgb(233, 52, 55);
	color: white;
	height: 180rpx;
	padding: 20px 20px;
	font-size: 16px;

	.title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.shalllList {
		display: flex;

		.ordernum {
			font-size: 12px;
		}

		.money {
			margin-left: 10px;
			font-size: 12px;
		}
	}
}

.InfoList {
	border-radius: 10px;
	background-color: white;
	position: relative;
	top: -35px;
	left: 0px;
	display: flex;
	height: 70px;
	width: 90%;
	margin: auto;
	font-size: 8px;
}

.myorder {
	background-color: #f8f8f8;
	height: 300vh;
}
</style>
